<template>
  <div class="centers_mr">
    <h1 class="welcom_tm">欢迎您，亲爱的用户   <font>{{user.realName}}</font></h1>
<!--    <el-button type="success" style="width: 100px;height: 40px;background-color: #00a854;position: absolute;right: 140px" @click="toSign">签到</el-button>-->
    <div class="public_m1">
      <div class="public_m2">资料管理</div>
      <!--照片和内容-->
      <div class="zp_nrm">
        <!--left-->
        <div class="zp_nrm_l">
          <img :src="user.imageUrl">
          <single-upload v-model="user.imageUrl" style="width: 30px;"></single-upload>
        </div>
        <!--right-->
        <div class="zp_nrm_r">
          <p><em>用户名：</em></p><el-input v-model="user.userName"></el-input>
          <p><em>密码：</em></p><el-input v-model="user.password"></el-input>
          <p><em>姓名：</em></p><el-input v-model="user.realName"></el-input>
          <p><em>电话：</em></p><el-input v-model="user.phone"></el-input>
          <a  class="public_m3" style="color: white" @click="saveAndUpdateUserInfo">保存修改</a>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="addOrUpdateVisible" title="充值" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="form"  ref="form" @keyup.enter.native="formSubmitHandle()" label-width="100px">
        <el-form-item label="充值金额" prop="money">
          <el-input v-model="form.money" placeholder="充值金额"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button style="height: 40px;width: 80px;background-color: #00a854;color: white" @click="addOrUpdateVisible = false">取消</el-button>
        <el-button style="height: 40px;width: 80px;background-color: #00a854;color: white" type="primary" @click="formSubmitHandle()">确认</el-button>
      </template>
    </el-dialog>
    <el-dialog :visible.sync="addOrUpdateVisible2" title="开通VIP" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="form" ref="form" @keyup.enter.native="formSubmitHandle2()" label-width="100px">
        <el-form-item label="开通几月" prop="money">
          <el-input-number v-model="form.number"  :min="1" :max="10" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item v-if="form.number > 0" label="总价" prop="money">
          <span>{{info.price}} x {{form.number}}</span>
          <span style="margin-left: 10px">=</span>
          <span style="margin-left: 10px">{{info.price * form.number}}元</span>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button style="height: 40px;width: 80px;background-color: #00a854;color: white" @click="addOrUpdateVisible2 = false">取消</el-button>
        <el-button style="height: 40px;width: 80px;background-color: #00a854;color: white" type="primary" @click="formSubmitHandle2()">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import SingleUpload from "../../components/common/singleUpload";
  import { getUserInfo,saveUserInfo, updateUserInfo } from '../../api/user';
  export default {
    name: "PersonCenter",
    components: {SingleUpload},
    computed:{
      userType(){
        return sessionStorage.getItem('userType')
      }
    },
    data(){
      return{
        user:{},
        addOrUpdateVisible:false,
        form:{
        },
        addOrUpdateVisible2:false,
        baseUrl:null,
        info:{}
      }
    },
    created() {
      this.getData();
    },

    methods:{
      getData(){
        getUserInfo({id:sessionStorage.getItem("userId")}).then(res =>{
          this.user = res.data.list[0];
          this.baseUrl = res.baseUrl
        });

      },

      toSign(){
        saveSignInfo({
          userId:sessionStorage.getItem('userId'),
        }).then(res =>{
          if (res.code === 1){
            this.$message.success('签到成功')
          }else {
            this.$message.warning(res.msg)
          }
        })
      },

      formSubmitHandle(){
        this.form.id = sessionStorage.getItem("userId");
        reMoney(this.form).then(res=>{
          if (res.code === 1){
            this.$message.success('充值成功');
            this.getData();
            this.addOrUpdateVisible = false;
          }else {
            this.$message.warning(res.msg)
          }
        })
      },


      openDialog(){
        this.form = {};
        this.addOrUpdateVisible = true;
      },


      saveAndUpdateUserInfo(){
        updateUserInfo(this.user).then(res =>{
          if (res.code ===1){
            this.$message.success('修改成功');
            this.getData();
          }else {
            this.$message.warning('修改失败')
          }
        })
      }
    }
  }
</script>

<style scoped>
  /deep/ .el-upload{
    width: 130px;
    margin-top: 20px;
  }
  /deep/ .el-upload--text{
    border: none;
  }
  .centers_mr {
    max-width: 1200px;
    height: auto;
    margin:0 auto;
    /*float: right;*/
    background: #fff;
    box-shadow: 0 0 2px #eaeaea;
    overflow: hidden;
  }
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    text-decoration: none;
  }
  div {
    display: block;
  }
  .welcom_tm {
    width: 930px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    font-weight: 100;
  }
  h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }
  .welcom_tm font {
    color: #e50012;
  }
  .public_m1 {
    width: 888px;
    height: auto;
    overflow: hidden;
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 3px;
  }
  .public_m2 {
    width: 888px;
    height: 20px;
    overflow: hidden;
    line-height: 20px;
    font-size: 18px;
    color: #333;
    border-left: 3px solid #fa3b4a;
    text-indent: 6px;
    margin-bottom: 19px;
  }
  .zp_nrm {
    width: 888px;
    height: auto;
    overflow: hidden;
    padding-bottom: 64px;
  }
  .zp_nrm_l {
    width: 120px;
    height:180px;
    float: left;
    overflow: hidden;
  }
  .zp_nrm_l img {
    display: block;
    width: 120px;
    height: 120px;
    overflow: hidden;
  }
  .zp_nrm_l a {
    display: block;
    width: 120px;
    height: 24px;
    font-size: 14px;
    color: #333;
    text-align: center;
    line-height: 24px;
  }
  .zp_nrm_r {
    width: 748px;
    height: auto;
    float: right;
    overflow: hidden;
  }
  .zp_nrm_r p {
    display: block;
    width: 748px;
    height: 51px;
    line-height: 51px;
    color: #333;
    font-size: 14px;
    border-bottom: 1px dashed #eaeaea;
    overflow: hidden;
  }
  .zp_nrm_r em {
    display: block;
    float: left;
    width: 56px;
    float: left;
    height: 51px;
    line-height: 51px;
    text-align: right;
  }
  body, ul, ol, li, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset, .pr, .pc, em, del {
    font-style: normal;
    font-size: 100%;
  }
  .zp_nrm_r i {
    font-style: normal;
    display: block;
    float: left;
    height: 51px;
    line-height: 51px;
    margin-right: 27px;
  }
  .zp_nrm_r i {
    font-style: normal;
    display: block;
    float: left;
    height: 51px;
    line-height: 51px;
    margin-right: 27px;
  }
  .public_m3 {
    display: block;
    width: 266px;
    height: 46px;
    background: #fa3b4a;
    text-align: center;
    line-height: 46px;
    color: #fff;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 18px;
  }
  .student {
    --tw-text-opacity: 1;
    background: rgba(0,191,128,.1);
    border-radius: 4px;
    color: #00bf80 !important;
    color: rgba(0,191,128,var(--tw-text-opacity));
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
    padding: 5px 12px;
    text-align: center;
    white-space: nowrap;
  }
</style>
